
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>登录</title>
    <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="style1.css">
  <link rel="icon" href="img/片1.ico" type="images/x-ico" />
  </head>
  <body>
  	 <input type="checkbox" id="check">
    <label for="check">
        <i class="fas fa-bars" id="btn"></i>
        <i class="fas fa-times" id="cancel"></i>
    </label>
    <div class="sidebar">
       <a href="#"> <header>心旅计划</header></a>
        <ul>
            <li><a href="#"><i class="fas fa-qrcode"></i>登录</a></li>
            <li><a href="#"><i class="fas fa-link"></i>记录</a></li>
            <li><a href="#"><i class="fas fa-stream"></i>他人</a></li>
            <li><a href="#" style="font-size: 10px;"><i class="fas fa-calendar-week"></i>专业咨询师帮助【团队建设中。。。】</a></li>
            <li><a href="#"><i class="far fa-question-circle"></i>充值</a></li>
            <li ><a href="#" style="font-size: smaller;"><i class="fas fa-sliders-h"></i>社区【构建中。。。】</a></li>
            <li><a href="#" style="font-size: smaller;"><i class="far fa-envelope"></i>Feeback【构建中。。。】</a></li>
        </ul>
    </div>
  
    <div class="bg-img">
      <div class="content">
        <header>进入心旅</header>
        <form action="#">
          <div class="field">
            <span class="fa fa-user"></span>
            <input type="text" required placeholder="Email or Phone">
          </div>
          <div class="field space">
            <span class="fa fa-lock"></span>
            <input type="password" class="pass-key" required placeholder="Password">
            <span class="show">SHOW</span>
          </div>
          <div class="pass">
            <a href="#">忘记密码?</a>
          </div>
          <div class="field">
            <input type="submit" value="LOGIN">
          </div>
        </form>
        <div class="login">Or login with</div>
        <div class="links">
          <div class="wx">
            <i ><span>WeiXin</span></i>
          </div>
          <div class="QQ">
            <i ><span>QQ</span></i>
          </div>
        </div>
        <div class="signup">马上注册
          <a href="#">Signup Now</a>
        </div>
      </div>
    </div>

    <script>
      const pass_field = document.querySelector('.pass-key');
      const showBtn = document.querySelector('.show');
      showBtn.addEventListener('click', function(){
       if(pass_field.type === "password"){
         pass_field.type = "text";
         showBtn.textContent = "HIDE";
         showBtn.style.color = "#3498db";
       }else{
         pass_field.type = "password";
         showBtn.textContent = "SHOW";
         showBtn.style.color = "#222";
       }
      });
    </script>


  </body>
</html>
